<%@ page contentType="text/html;charset=UTF-8" import="java.util.*,com.beans.*,com.dao.CateDao" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<html>
  <head>
    <base href="<%=basePath%>">
    <title>goods_add</title>
    
    <link rel="stylesheet" type="text/css" href="css/edittable.css"/>
    <link rel="stylesheet" type="text/css" href="css/validate.css"/>
    <script type="text/javascript" src="js/jquery-1.8.0.js"></script>
    <script type="text/javascript" src="js/validate.js"></script>
	
	<style>
        /*模拟文件控件的文本框*/
        .file-box{
            position:relative;width:320px
        }

        /*模拟文件控件的提交按钮*/
        .filebtn{
            background-color:#FFF;
            border:1px solid #CDCDCD;
            height:20px;
            width:70px;
        }
        /*隐藏真的文件控件*/
        .file{
            position:absolute;
            top:0;
            right:40px;
            filter:alpha(opacity:0);opacity: 0;
            width:280px;
            height:30px;
        }
        label{
            margin-left:10px;
        }
    </style>
    <script type="text/javascript">
    	
    	//处理图片
        function setImagePreview(docObj, localImagId, imgObjPreview, width, height) {
            if (docObj.files && docObj.files[0]) { //火狐下，直接设img属性
                imgObjPreview.style.display = 'block';
                imgObjPreview.style.width = width;
                imgObjPreview.style.height = height;
                //火狐7以上版本不能用上面的getAsDataURL()方式获取，需要下面的方式
                imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
            } else { //IE下，使用滤镜
                docObj.select();
                var imgSrc = document.selection.createRange().text;
                //必须设置初始大小
                localImagId.style.width = width;
                localImagId.style.height = height;
                //图片异常的捕捉，防止用户修改后缀来伪造图片
                try {
                    localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
                    localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
                } catch (e) {
                    alert("图片格式不正确，请重新选择");
                    return false;
                }
                imgObjPreview.style.display = 'none';
                document.selection.empty();
            }
        }
    	
      	//验证商品名
		function validateGoodsName() {
			var result = true;
            var goodsName=$("#goodsName").val();
            var reg = /^\S{2,20}$/;   //2-20个非空字符
            if (reg.test(goodsName)) {
                $.ajax({
                    url: "GoodsServlet.do",
                    type: "POST",
                    data: {goodsName: $("#goodsName").val(),flag:"validate"},
                    success: function (data) {
                       if(data==-1){
                           $("#goodsName_msg").removeClass().addClass("validate_error").html("用户名已存在");
                           return false;
                       }else {
                           $("#goodsName_msg").removeClass().addClass("validate_ok").html("✓");
                           return true;
                       }
                    }
                });
            } else {
                $("#goodsName_msg").removeClass().addClass("validate_error").html("用户名格式不正确");
                return false;
            }
        }
    	
      	//验证计量单位
        function validateUnit() {
            var result = true;
            var unit=$("#unit").val();
            var reg = /^\S{1,10}$/;   //1-10个非空字符
            if (!reg.test(unit)) {
                $("#unit_msg").removeClass().addClass("validate_error").html("输入格式不正确");
                result = false;
            }
            if (result==true) {
                $("#unit_msg").removeClass().addClass("validate_ok").html("√");
            }
            return result;
        }
      	
     	 //验证商品价格
        function validatePrice(item) {
            var result = true;
            var price=$("#price").val();
            
            if (price == "") {
                result = false;
                $("#price_msg").removeClass().addClass("validate_error").html("商品价格不能为空");
            } else if (isNaN(price)||(price<0)) {
                result = false;
                $("#price_msg").removeClass().addClass("validate_error").html("输入格式不正确");
            } 
            if (result == true) {
                $("#price_msg").removeClass().addClass("validate_ok").html("√");
            }
            return result;
        };
        
       $(function(){
		  	//级联查询
			$("#bigCateId").change(function () {
				if (this.value == "-1") {
				    $("#smallCateId").html("<option value='-1'>选择小分类</option>");
				    return;
				}
				$.ajax({
				    url: "GoodsServlet.do",
				    type: "POST",
				    async: false,
				    dataType: "json",
				    data: {bigCateId: this.value, flag: "smallCateList"},
				    success: function (cateList) {
				        $("#smallCateId").empty();
				        $.each(cateList, function (key, cate) {
				            var str = "<option value='" + cate.id + "'>" + cate.cateName + "</option>";
				            $("#smallCateId").append(str);
				        });
				    }
				});
			});
		  	 //回显分类选择
			 $("#bigCateId").val("${param.bigCateId}");
             $("#bigCateId").change();
             $("#smallCateId").val("${param.smallCateId}");
	   	   
			//上传图片
			$("#pic_instead").hide();
			$("#picture").change(function(){
			    $("#pic_instead").val(this.value);
			}); 
			
			
			//验证各项输入
			$("#goodsName").blur(function () {
	        	validateGoodsName();
	        });
			$("#unit").blur(function () {
			  validateUnit();
			});
			   $("#price").blur(function () {
			 	validatePrice();
			});
			   
			$(".form_btn").click(function () {
		        var result=true;
		        if (validateGoodsName()==false) {
		           result=false;
		        }
		        if(validateUnit()==false){
		            result=false;
		        }
		        if(validatePrice()==false){
		            result=false;
		        }
		        if(result==true){
		            return confirm("请确认提交");
		        }
		        return result;
			});
       });
    </script>

</head>
<body>
	<div class="div_title">
		<div class="div_titlename"><img src="images/san_jiao.gif"><span>商品添加</span></div>
	</div>
	
	<%
		 CateDao cateDao=new CateDao();
		 List<CateInfo> cateList=cateDao.getCateList(0);
		 request.setAttribute("cateList",cateList);
	%>
	
	<form action="${pageContext.request.contextPath}/GoodsServlet.do?flag=add" 
		 	method="post"  
		 	name="form1" 
		 	enctype="multipart/form-data" 
		 	onsubmit="return validateInput()"
		>
		<input type="hidden" name="flag" value="add">
		<table class="edit_table">
		    <tr>
		        <td class="td_info">商品名称:</td>
		        <td class="td_input_short">
		            <input type="text" class="txtbox" id="goodsName" name="goodsName" value="${param.goodsName}"/>
		        </td>
		        <td>
		            <label class="validate_info" id="goodsName_msg" >2-10位非空白字符</label>
		        </td>
		    </tr>
		    <tr>
		        <td class="td_info">所属分类:</td>
		        <td>
		            <select name="bigCateId" id="bigCateId">
		                <option value="-1">-选择大分类-</option>
		                <c:forEach var="cate" items="${cateList}">
		                    <option value="${cate.id }" <c:if test="${cate.id==goods.bigCateId}">selected</c:if> >
		                    	${cate.cateName }
		                    </option>
		                </c:forEach>
		            </select>
		            <select id="smallCateId" name="smallCateId">
		                <option value="-1">-选择小分类-</option>
		            </select>
		        </td>
		        <td><label class="validate_info" id="cate_msg">请指定商品所属的分类</label></td>
		    </tr>
		    <tr>
		        <td class="td_info">计量单位:</td>
		        <td><input type="text" class="txtbox" id="unit" name="unit" value="${param.unit}"/>
		        </td>
		        <td><label class="validate_info" id="unit_msg">1-10个非空字符</label></td>
		    </tr>
		    <tr>
		        <td class="td_info">商品价格:</td>
		        <td><input type="text" class="txtbox" id="price" name="price" value="${param.price}"/></td>
		        <td><label class="validate_info" id="price_msg">不能为空，以元为单位，可以是小数</label></td>
		    </tr>
		    <tr>
		        <td class="td_info">生产厂商:</td>
		        <td><input type="text" class="txtbox" id="producter" name="producter" value="${param.producter}"/>
		        </td>
		        <td></td>
		    </tr>
		    <tr>
		        <td class="td_info">商品图片:</td>
		        <td>
		        	<div class="file-box">
		        	    <input type="text" name="pic_instead" id="pic_instead" class="txtbox">
		        		<input type="file" name="picture" id="picture" class="file" size="28"
		        		onchange="setImagePreview(this,localImag,preview,'100px','125px');"> <br>
		        		<input type="button" class="filebtn" value='上传图片'>
		        	</div>
					<div id="localImag" style="margin-left: 24px"></div>       
		        	<img id="preview" alt=""  src="${pageContext.request.contextPath }/goods/picture.jsp?goodsId=${goods.id}" />
		        	<label class="validate_info" id="picture_msg"></label>
		        </td>
		        <td></td>
		    </tr>
		    <tr>
		        <td class="td_info">备注信息:</td>
		        <td><textarea rows="4" cols="27" name="des" class="txtarea">${param.des}</textarea></td>
		        <td><label></label></td>
		    </tr>
		    <tr>
		        <td class="td_info"></td>
		        <td>
		            <input class="form_btn" type="submit" value="提交"/>
		            <input type="reset" class="form_btn" value="重置"/></td>
		        <td>
		            <label id="result_msg" class="result_msg">${msg}</label>
		        </td>
		    </tr>
		</table>
	</form>
</body>
</html>
